<template>
  <div>
    <el-dialog :visible="visible" title="打印预览" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" @close="hideModal">
      <template slot="title">
        <span style="margin-right: 10px;">打印预览</span>
        <el-button size="mini" type="primary" @click="print()">打印</el-button>
        <el-button size="mini" type="primary" @click="toPDF()">pdf</el-button>
      </template>

      <div id="preview_content_custom" :style="{width: width + 'mm'}"></div>

      <template slot="footer">
        <el-button size="small" @click="hideModal()">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {printLodop} from '../../utils/index'

export default {
  name: "printPreview",
  /*
  render(createElement, context) {
    let _this = this;
    return createElement('el-dialog', {
      props: {visible: this.visible, appendToBody: true, closeOnClickModal: false, closeOnPressEscape: false, width: `${_this.width}mm`},
      on: {close: _this.hideModal},
      scopedSlots: {
        title: function () {
          return createElement('div', [
              createElement('span', '打印预览'),
              createElement('el-button', {props: {size: 'mini', type: 'primary'}, on: {click: _this.print}}, '打印'),
              createElement('el-button', {props: {size: 'mini', type: 'primary'}, on: {click: _this.toPDF}}, 'pdf'),
          ])
        },
        footer: function () {
          return createElement('el-button', {props: {size: 'mini'}, on: {click: _this.hideModal}}, '关闭')
        },
        default: function () {
          return createElement('div', {id: 'preview_content_custom'})
        }
      }
    })
  },
  // */
  data() {
    return {
      visible: false,
      spinning: true,
      waitShowPrinter: false,
      width: 210,
      innerHtml: '',
      hiprintTemplate: {},
      printData: {},
      page: {
        pageDirection: 1,   // 1-纵向 2-横向
        pageWidth: 210,
        pageHeight: 296.6,
        pageMarginTop: 0,
        pageMarginleft: 0,
        pageContentHeight: 100,
        pageContentWidth: 100
      }
    }
  },
  created() {
  },
  methods: {
    hideModal() {
      this.visible = false;
    },
    show(hiprintTemplate, printData, width = 210, height = 296.6) {
      this.visible = true;
      this.spinning = true;
      this.page.pageWidth = this.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
      this.page.pageHeight = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.height : height;
      this.hiprintTemplate = hiprintTemplate;
      this.printData = printData;
      this.$nextTick(() => {
        $('#preview_content_custom').html(hiprintTemplate.getHtml(printData))
        // this.innerHtml = hiprintTemplate.getHtml(printData);
        // console.log(this.innerHtml.html);
        this.spinning = false;
      })
    },
    print() {
      this.waitShowPrinter = true;
      let styles = `<style>
        html, body, p, div, span, ul, li, ol, table, tr, td, th {padding: 0;}
        @media print {
          body {
            margin: 0;
            padding: 0;
          }
        }
        @page {
          margin: 0;
        }
        .hiprint-printPaper * {
          box-sizing: border-box;
          image-rendering: -webkit-optimize-contrast; /* 让图片/标尺稍微清楚一点 */
        }
        .hiprint-printPaper *:focus {
          outline: -webkit-focus-ring-color auto 0px;
        }
        .hiprint-page-break-avoid {
          page-break-after: avoid;
        }
        .hiprint-printPaper {
          position: relative;
          padding: 0 0 0 0;
          page-break-after: always;
          -webkit-user-select: none; /* Chrome/Safari/Opera */
          -moz-user-select: none; /* Firefox */
          user-select: none;
          overflow: hidden;
        }
        .hiprint-printPaper .hiprint-printPaper-background {
          position: absolute;
          pointer-events: none;
          z-index: 0;
          left: 0;
          top: 0;
        }
        .hiprint-printPaper .hiprint-printPaper-content {
          position: relative;
        }
        .hiprint-printPaper.design {
          overflow: visible;
        }
        .hiprint-printTemplate .hiprint-printPanel {
          page-break-after: always;
        }
        .hiprint-printPaper, hiprint-printPanel {
          box-sizing: border-box;
          border: 0;
        }
        .hiprint-printPanel .hiprint-printPaper:last-child {
          page-break-after: avoid;
        }
        .hiprint-printTemplate .hiprint-printPanel:last-child {
          page-break-after: avoid;
        }
        .hiprint-printPaper .hideheaderLinetarget {
          border-top: 0px dashed rgb(201, 190, 190) !important;
        }
        .hiprint-printPaper .hidefooterLinetarget {
          border-top: 0px dashed rgb(201, 190, 190) !important;
        }
        .hiprint-printPaper.design {
          border: 1px dashed rgba(170, 170, 170, 0.7);
        }
        .design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
          overflow: hidden;
          box-sizing: border-box;
        }
        .design .resize-panel {
          box-sizing: border-box;
          border: 1px dotted;
        }
        .hiprint-printElement-text {
          background-color: transparent;
          background-repeat: repeat;
          border: 0.75pt none rgb(0, 0, 0);
          direction: ltr;
          font-family: "SimSun";
          font-size: 9pt;
          font-style: normal;
          font-weight: normal;
          padding: 0;
          text-align: left;
          text-decoration: none;
          line-height: 9.75pt;
          box-sizing: border-box;
          word-wrap: break-word;
          word-break: break-all;
        }
        .design .hiprint-printElement-text-content {
          border: 1px dashed rgb(206, 188, 188);
          box-sizing: border-box;
        }
        .hiprint-printElement-longText {
          background-color: transparent;
          background-repeat: repeat;
          border: 0.75pt none rgb(0, 0, 0);
          direction: ltr;
          font-family: "SimSun";
          font-size: 9pt;
          font-style: normal;
          font-weight: normal;
          padding: 0;
          text-align: left;
          text-decoration: none;
          line-height: 9.75pt;
          box-sizing: border-box;
          word-wrap: break-word;
          word-break: break-all;
          /*white-space: pre-wrap*/
        }
        .hiprint-printElement-table {
          background-color: transparent;
          background-repeat: repeat;
          color: rgb(0, 0, 0);
          border-color: rgb(0, 0, 0);
          border-style: none;
          direction: ltr;
          font-family: "SimSun";
          font-size: 9pt;
          font-style: normal;
          font-weight: normal;
          text-align: left;
          text-decoration: none;
          padding: 0;
          box-sizing: border-box;
          line-height: 9.75pt;
        }
        .hiprint-printElement-table thead {
          background: #e8e8e8;
          font-weight: 700;
        }
        table.hiprint-printElement-tableTarget {
          width: 100%;
        }
        .hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
          border: 1px solid rgb(0,0,0);
          font-weight: normal;
          direction: ltr;
          padding: 0 4pt;
          text-decoration: none;
          vertical-align: middle;
          box-sizing: border-box;
          word-wrap: break-word;
          word-break: break-all;
          /*line-height: 9.75pt;*/
          font-size: 9pt;
        }
        .hiprint-printElement-tableTarget-border-all {
          border: 1px solid !important;
        }
        .hiprint-printElement-tableTarget-border-none {
          border: 0 solid !important;
        }
        .hiprint-printElement-tableTarget-border-lr {
          border-left: 1px solid !important;
          border-right: 1px solid !important;
        }
        .hiprint-printElement-tableTarget-border-left {
          border-left: 1px solid !important;
        }
        .hiprint-printElement-tableTarget-border-right {
          border-right: 1px solid !important;
        }
        .hiprint-printElement-tableTarget-border-tb {
          border-top: 1px solid !important;
          border-bottom: 1px solid !important;
        }
        .hiprint-printElement-tableTarget-border-top {
          border-top: 1px solid !important;
        }
        .hiprint-printElement-tableTarget-border-bottom {
          border-bottom: 1px solid !important;
        }

        .hiprint-printElement-tableTarget-border-td-none td {
          border: 0 solid !important;
        }
        .hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n + 2)) {
          border-right: 1px solid;
        }
        .hiprint-printElement-tableTarget-border-td-all td:not(last-child) {
          border-right: 1px solid;
        }
        .hiprint-printElement-tableTarget-border-td-all td:last-child {
          border-left: 1px solid;
        }
        .hiprint-printElement-tableTarget-border-td-all td:last-child:first-child {
          border-left: none;
        }
        /*.hiprint-printElement-tableTarget tr,*/
        .hiprint-printElement-tableTarget td {
          height: 18pt;
        }
        .hiprint-printPaper .hiprint-paperNumber {
          font-size: 9pt;
        }
        .design .hiprint-printElement-table-handle {
          position: absolute;
          height: 12pt;
          width: 12pt;
          background: red;
          z-index: 1;
        }
        .design .hiprint-printElement-handle {
          position: absolute;
          height: 12pt;
          width: 12pt;
          background: red;
          z-index: 1;
        }
        .hiprint-printPaper .hiprint-paperNumber-disabled {
          float: right !important;
          right: 0 !important;
          color: gainsboro !important;
        }
        .hiprint-printElement-vline, .hiprint-printElement-hline {
          border: 0 none rgb(0, 0, 0);
        }
        .hiprint-printElement-vline {
          border-left: 0.75pt solid #000;
          border-right: 0 none rgb(0, 0, 0) !important;
          border-bottom: 0 none rgb(0, 0, 0) !important;
          border-top: 0 none rgb(0, 0, 0) !important;
        }
        .hiprint-printElement-hline {
          border-top: 0.75pt solid #000;
          border-right: 0 none rgb(0, 0, 0) !important;
          border-bottom: 0 none rgb(0, 0, 0) !important;
          border-left: 0 none rgb(0, 0, 0) !important;
        }
        .hiprint-printElement-oval, .hiprint-printElement-rect {
          border: 0.75pt solid #000;
        }
        .hiprint-text-content-middle {
        }
        .hiprint-text-content-middle > div:first-child {
          display: grid;
          align-items: center;
        }
        .hiprint-text-content-bottom {
        }
        .hiprint-text-content-bottom > div:first-child {
          display: grid;
          align-items: flex-end;
        }
        .hiprint-text-content-wrap {
        }
        .hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap {
          white-space: nowrap;
        }

        .hiprint-text-content-wrap .hiprint-text-content-wrap-clip {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: clip;
        }
        .hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        /*hi-grid-row */
        .hi-grid-row {
          position: relative;
          height: auto;
          margin-right: 0;
          margin-left: 0;
          zoom: 1;
          display: block;
          box-sizing: border-box;
        }
        .hi-grid-row::after, .hi-grid-row::before {
          display: table;
          content: "";
          box-sizing: border-box;
        }
        .hi-grid-col {
          display: block;
          box-sizing: border-box;
          position: relative;
          float: left;
          flex: 0 0 auto;
        }
        .table-grid-row {
          margin-left: 0;
          margin-right: 0;
        }
        .tableGridColumnsGutterRow {
          padding-left: 0;
          padding-right: 0;
        }
        .hiprint-gridColumnsFooter {
          text-align: left;
          clear: both;
        }
      </style>`;
      let temp = this.hiprintTemplate.getHtml(this.printData);
      // console.log(temp[0].outerHTML);
      printLodop(0, styles + temp[0].outerHTML, this.page, 1);
      this.waitShowPrinter = false;
    },
    toPDF() {
      this.hiprintTemplate.toPdf(this.printData, '打印预览pdf');
    }
  }
}
</script>

<style scoped>

.el-dialog {}
</style>

